<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-card>
      <span style="margin-left:40px;"
      ><a
        href="/static/download/example.xlsx"
        download="example.xlsx"
      >下载导入模板</a
      ></span
      >
    </el-card>
    <el-card>
      <el-upload
        class="upload-demo"
        drag
        ref="upload"
        action="fakeaction"
        :http-request="uploadFn"
        :show-file-list="true"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <!-- <el-button
        style="margin-left: 45%;"
        size="small"
        type="success"
        v-loading.fullscreen.lock="fullscreenLoading"
        @click="submitUpload"
        >上传到服务器</el-button
      > -->
    </el-card>

    <el-card>
      <el-row>
        {{ errorTips }}
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import { ajax } from "@/store/yg/common/utils";
  import axios from "axios";
  import { untransform } from "@/store/yg/common/uri";
  import * as constant from "@/store/yg/common/constant";
  export default {
    data() {
      return {
        errorTips: "",
        fullscreenLoading: false,
        action: "",
        feeData: [],
        fileList: [
          { name: "food.jpeg", url: "" },
          { name: "food2.jpeg", url: "" }
        ]
      };
    },
    created: function() {
      this.action =
        constant.API_SERVER +
        "/api/consume/upload?uri=" +
        untransform(this.$route.params.uri) +
        "&f=uploadCollectionAccount&type=list&name=sub&id=" +
        this.$store.state.edit.id;
    },

    methods: {
      uploadFn(params) {
        this.fullscreenLoading = true;
        //自定义上传文件
        const file = params.file,
          fileType = file.type,
          isImage = fileType.indexOf("pdf") !== -1,
          isLt4M = file.size / 1024 / 1024 < 4;
        const form = new FormData();
        // 文件对象
        form.append("items[]", file);
        axios({
          method: "post",
          url: this.action,
          data: form
        })
          .then(response => {
            this.fullscreenLoading = false;
            console.log("返回数据：",response)
            if (response.data.code === 200) {
              this.errorTips = "导入成功";
              this.$message.success("导入成功!");
              // this.feeData.push({
              //   mes: response.data.data.fileName,
              //   fee: response.data.data.fullFileName
              // });
            } else {
              if (response.data.message) {
                this.errorTips = response.data.message;
                this.$notify.error({
                  title: "错误",
                  message: "上传失败!" + response.data.message
                });
              }
            }
          })
       ;
      },

      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  };
</script>
